<template>
  <div>
    <div class="login-box register-box" v-if="chushiShow">
      <header>
        <a href="#">
          <img class="avg-header" src="@/assets/images/logo.png" />
        </a>
      </header>
      <div class="main">
        <div class="title">
          <h1>用户注册</h1>
          <!-- <img src="../assets/images/login_img1.svg" alt /> -->
        </div>
        <div class="form-box">
          <el-form
            label-position="top"
            label-width="auto"
            :rules="rules"
            :model="formInfo"
            ref="formInfoRef"
          >
            <el-form-item label="账号 Email" prop="email">
              <el-input type="email" v-model="formInfo.email" placeholder="example@mail.com" />
              <template #error>
                <div class="form-error" style>
                  <el-icon :size="24" color="#e65442">
                    <Warning />
                  </el-icon>
                  <span>{{ message1 }}</span>
                </div>
              </template>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input type="password" v-model="formInfo.password" placeholder="8-16位英数混合，允许特殊符号，区分大小写" />
              <template #error>
                <div class="form-error" style>
                  <el-icon :size="24" color="#e65442">
                    <Warning />
                  </el-icon>
                  <span>{{ message2 }}</span>
                </div>
              </template>
            </el-form-item>
            <el-form-item prop="password2">
              <el-input type="password" v-model="formInfo.password2" placeholder="请再次确认密码" />
              <template #error>
                <div class="form-error" style>
                  <el-icon :size="24" color="#e65442">
                    <Warning />
                  </el-icon>
                  <span>{{ message3 }}</span>
                </div>
              </template>
            </el-form-item>
            <el-form-item>
              <daojishi></daojishi>
            </el-form-item>

            <p class="term">
              注册即同意
              <router-link to="/tos" target="_blank">用户服务协议</router-link>和
              <router-link to="/privacypolicy" target="_blank">隐私权政策</router-link>
            </p>
          </el-form>
        </div>
        <div class="btn">
          <el-button type="danger" round @click="submitForm(formInfoRef)">注册</el-button>
        </div>
        <div class="tips">
          <span>已经注册 本网站 账号？</span>
          <router-link to="/login">立即登录</router-link>
        </div>
      </div>
    </div>

    <div class="login-box register-box" v-if="successShow">
      <header>
        <a href="#">
          <img class="avg-header" src="@/assets/images/logo.png" />
        </a>
      </header>
      <div class="main zhuce-center">
        <div class="text-center-zhuce">注册完成</div>
        <div class="text-center-zhuce top20">请验证您的 Email</div>
        <div class="text-center-zhuce top20"></div>
        <div class="text-center-zhuce top20">
          您的账号尚未验证成功，请至您的 Email 邮箱收取验证码
          并在规定时间内完成验证
        </div>
        <div class="text-center-zhuce top20">928374610@qq.com</div>
        <div class="text-center-zhuce top20">
          <div class="chongxing-login-btn" @click="chognxingAction">重新登录</div>
        </div>
      </div>
    </div>

    <div class="login-box register-box" v-if="comeShow">
      <header>
        <a href="#">
          <img class="avg-header" src="@/assets/images/logo.png" />
        </a>
      </header>
      <div class="main">
        <div class="text-center-zhuce top20">
          <img class="avg-header-content" src="@/assets/images/logo.png" />
        </div>
        <div class="hi-box top20">Hi!歡迎加入 KadoKado請驗證您的 Email 帳號</div>

        <div class="ruoning-box top20">若您沒有使用此信箱申請 KadoKado 帳號，請忽略此封郵件。</div>

        <div class="text-center-zhuce top20">
          <div class="chongxing-login-btn" @click="submitForm">立即驗證 Email</div>
        </div>

        <div class="top20">
          此連結將於1小時後過期，若速結失效，
          <span class="qingdeng-ru">请登入並重新發送驗證信</span>
        </div>
      </div>
    </div>

    <div class="login-box register-box" v-if="endSuccessShow">
      <header>
        <a href="#">
          <img class="avg-header" src="@/assets/images/logo.png" />
        </a>
      </header>

      <div class="main">
        <div class="text-center">验证成功</div>

        <div class="text-center-zhuce top20">
          <img class="avg-header-end" src="@/assets/images/end-true.png" />
        </div>

        <div class="text-center ruoning-box top20">您现在已经可以使用</div>

        <div class="text-center top20">928374610@qq.com</div>

        <div class="text-center ruoning-box top20">登录并使用 本网站 服务。</div>

        <div class="text-center-zhuce top20">
          <div class="chongxing-login-btn" @click="hrefToHome">前往 本网站 首页</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { register } from "@/api/login";
import { useRouter } from "vue-router";
import { showNotify, setNotifyDefaultOptions } from "vant";
import daojishi from "@/components/daojishi/daojishi.vue";
const router = useRouter();
const formInfoRef = ref(null);
const formInfo = reactive({
  email: "18725519631@139.com",
  password: "wx123456",
  password2: "wx123456"
});

const isAccount = ref(true);
const successShow = ref(false);
const chushiShow = ref(true);
const comeShow = ref(false);
const endSuccessShow = ref(false);
const hrefToHome = () => {
  router.push("/");
};
const chognxingAction = () => {
  comeShow.value = true;
  successShow.value = false;
  chushiShow.value = false;
  endSuccessShow.value = false;
};

const nowCheck = () => {
  comeShow.value = false;
  successShow.value = false;
  chushiShow.value = false;
  endSuccessShow.value = true;
};

const message1 = ref(null);
const validateAccount = (rule, value, callback) => {
  const regEmail = /^([a-zA-Z0-9]+[-_.]?)+@[a-zA-Z0-9]+.[a-z]+$/;
  if (value === "") {
    message1.value = "账号不可为空";
    callback(new Error("账号不可为空"));
  } else {
    if (!regEmail.test(value.trim())) {
      message1.value = "账号格式错误或无法使用";
      callback(new Error("账号格式错误或无法使用"));
    } else {
      callback();
    }
  }
};

const message2 = ref(null);
const validatePass = (rule, value, callback) => {
  const regPass = /^[a-zA-Z0-9]{8,}$/;
  if (value === "") {
    message2.value = "密码不可为空";
    callback(new Error("密码不可为空"));
  } else {
    if (!regPass.test(value.trim())) {
      message2.value = "8-16位英数混合，允许特殊符号，区分大小写";
      callback(new Error("8-16位以上英数混合，允许特殊符号，区分大小写"));
    } else {
      callback();
    }
  }
};

const message3 = ref(null);
const validatePass2 = (rule, value, callback) => {
  if (value === "") {
    message3.value = "确认密码不可为空";
    callback(new Error("确认密码不可为空"));
  } else {
    if (value == formInfo.password) {
      callback();
    } else {
      message3.value = "与设定密码不一致";
      callback(new Error("与设定密码不一致"));
    }
  }
};

const rules = reactive({
  email: [
    {
      required: true,
      trigger: "blur",
      validator: validateAccount
    }
  ],
  password: [
    {
      required: true,
      trigger: "blur",
      validator: validatePass
    }
  ],
  password2: [
    {
      required: true,
      trigger: "blur",
      validator: validatePass2
    }
  ]
});

const submitForm = async formEl => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      const res = await register(formInfo);
      if (res.code == 200) {
        showNotify({
          type: "success", // 指定为成功类型
          message: "注册成功！" // 通知内容
        });
        router.push("/login");
      } else {
        showNotify("注册失败！");
      }
    }
  });
};
</script>

<style lang="scss" scoped>
.text-center {
  text-align: center;
}
.avg-header-end {
  width: 50px;
}
.qingdeng-ru {
  color: #e65442;
}
.hi-box {
  font-weight: 600;
  font-size: 22px;
  text-align: center;
}

.ruoning-box {
  color: #718096;
  font-size: 16px;
  text-align: center;
}
.text-center-zhuce {
  text-align: center;
}

.chongxing-login-btn {
  background-color: #fc8775;
  border-radius: 30px;
  color: white;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 5px 25px;
}
.text-center-zhuce:nth-of-type(4) {
  color: #718096 !important;
}
.text-center-zhuce:nth-of-type(1) {
  font-size: 22px;
}
header {
  position: sticky;
  top: 0em;
  padding-left: 1rem;
  padding-right: 1rem;
  width: 100%;
  height: 4rem;
  z-index: 30;
  background: #ffffff;
  display: flex;
  align-items: center;
}

.main {
  width: 100%;
  margin: 0 auto;
  max-width: 32rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-bottom: 4rem;
  .title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    h1 {
      font-size: 1.25rem;
      font-weight: 400;
      line-height: 4rem;
      letter-spacing: 0.05em;
      color: #1a202c;
      padding: 1rem;
      height: 4rem;
    }
  }
  .form-box {
    margin-top: 2rem;
    :deep(.el-form-item__label) {
      height: 4rem;
      line-height: 4rem;
      margin-bottom: 0;
      font-size: 1rem;
      font-weight: 400;
      letter-spacing: 0.05em;
      color: #1a202c;
    }
    :deep(.el-input) {
      display: flex;
      width: 100%;
      height: 3.5rem;
    }
    :deep(.el-input__wrapper) {
      background-color: #f7fafc;
    }
    .forget {
      display: flex;
      align-items: center;
      justify-content: end;
      height: 3rem;
      margin-bottom: 2rem;
      a {
        font-size: 0.875rem;
        font-weight: 500;
        line-height: 1.5;
        letter-spacing: 0.05em;
        color: #ff8674;
      }
    }
    .form-error {
      margin: 1rem 0px 0px;
      font-size: 0.875rem;
      font-weight: 400;
      line-height: 2;
      letter-spacing: 0.05em;
      color: #2d3748;
      display: flex;
      align-items: center;
      border-radius: 0.25rem;
      background-color: #fff4f2;
      padding: 1rem;
      gap: 0.5rem;
      box-shadow: none;
      width: 100%;
      span {
        font-size: 0.875rem;
        font-weight: 400;
        line-height: 2;
        letter-spacing: 0.05em;
        color: #e65442;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
    }
  }

  .btn {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
    :deep(.el-button) {
      width: 100%;
      max-width: 16rem;
      padding: 0 1rem;
      height: 3rem;
      line-height: 3rem;
      border-radius: 50rem;
      background-color:#feaa9e;
    }
  }
  .tips {
    text-align: center;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 2;
    letter-spacing: 0.05em;
    span {
      color: #718096;
    }
    a {
      color: #ff8674;
    }
  }

  .term {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.05em;
    color: #4a5568;
    text-align: center;
    margin-bottom: 1rem;
    a {
      color: #ff8674;
      text-decoration: underline;
    }
  }
}

.avg-header {
  width: 35px;
}

.avg-header-content {
  width: 130px;
}
</style>